<template>
	<view class="content" :style="{height:height+'px'}">
		<view style="background: white">
			<view class="input-wrap">
				<text class="input-key">姓名</text>
				<input v-model="userData.trueName" disabled="true"  maxlength="18" placeholder="请输入姓名"/>
			</view>
<!--			<view class="input-wrap">-->
<!--				<text class="input-key">开户行</text>-->
<!--				<text @click="showBank(true)" class="bank-value"-->
<!--					  :style="{color:bank=='请选择开户行'?'#7f7f7f':'#5e93c6'}">{{bank}}-->
<!--					<text style="color:#7f7f7f">》</text></text>-->
<!--			</view>-->
			<view class="input-wrap">
				<text class="input-key">卡号</text>
				<input v-model="card" type="number" style="width:70%" maxlength="19" placeholder="请输入卡号"/>
			</view>
			<view class="input-wrap">
				<text class="input-key">手机号码</text>
				<input v-model="phone" type="number" maxlength="11" placeholder="请输入手机号码"/>
			</view>
		</view>
		<view class="input-key"
			  style="padding-left:3%;margin:20upx 0;font-size:28upx;line-height: 32upx">
			温馨提示：绑定卡暂仅支持提供选择的银行的储蓄卡，同时请确保手机号为对应储蓄卡的柜面预留手机号</view>

		<button type="warn" class="sub-button" @click="bind">
			提交
		</button>
		<uni-popup :show="bankVisible"  mode="fixed" position="bottom" type="bottom"
				   msg="选择银行">
			<picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="valueBank" @change="bankChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in banks" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
			<view class="pick-button" style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" @click="bankOk">
				确定
			</view>
			<view class="pick-button" @click="showBank(false)">
				取消
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import API from '../../common/api.js';
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {uniPopup},
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				banks:['中国工商银行'],
				bank:'请选择开户行',
				bankTemp:'',
				bankVisible:false,
				userData:JSON.parse(uni.getStorageSync('data')),
				card:'',
			}
		},
		onLoad() {
			this.bankTemp=this.banks[0]
		},
		methods: {
			bind(){
				if(!this.card){
					uni.showModal({
						title: '提示',
						content: '请输入卡号',
						showCancel: false,
					});
					return
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){
					uni.showModal({
						title: '提示',
						content: '请输入正确的手机号码',
						showCancel: false,
					});
					return
				}
				API.bankBinding({ "bindCard": this.card,
					"mobile": this.phone,
					"token":uni.getStorageSync('token')}).then(res=>{
					if(res.status==200){
						if(res.data.returnCode==0){
							uni.showToast();
							uni.navigateBack({
								delta: 1
							});
						}else{
							uni.showModal({
								title: '提示',
								content: res.data.returnMsg,
								showCancel: false,
							});
						}
					}else{
						uni.showModal({
							title: '提示',
							content: '请求失败',
							showCancel: false,
						});
					}
				})
			},
			goUrl(url){
				uni.navigateTo({
					url: '../account/'+url
				});
			},
			showBank(flag){
				this.bankVisible=flag
			},
			bankChange(e){
				this.bankTemp=this.banks[e.detail.value[0]]
			},
			bankOk(){
				this.bank=this.bankTemp
				this.bankVisible=false
			},
		}
	}
</script>
<style scoped>
	.content {
		height: 100%;
		/*padding-top: 20upx;*/
		background: #F3F3F3;
	}
	button{
		width: 49%;
		margin-top:30upx;
		background: #D14F43;
		border-radius: 4upx;
	}
	.input-wrap{
		display: flex;
		justify-content: space-between;
		padding: 0 3%;
		border-bottom: 1px solid rgba(227, 227, 227, 1);
	}
	.input-key{
		font-size: 32upx;
		color: #64727f;
		line-height: 112upx;
	}
	input{
		padding:30upx 0;
		color: #5e93c6;
		font-size: 28upx;
		text-align: right;
		font-family: PingFangSC-regular;
		display: inline-block;
	}
	.bank-value{
		line-height: 112upx;
		font-size: 28upx;
		margin-right: -2%;
	}
	.pick-button{
		display: inline-block;
		width: 50%;
		border-top:1px solid #E8E8E8;
		border-bottom:1px solid #E8E8E8;
		margin-bottom:constant(safe-area-inset-bottom);
		margin-bottom:env(safe-area-inset-bottom);
	}
	.sub-button{
		width: 98%;
		margin:30upx 0 0 1%;
		background: #D14F43;
		border-radius: 4upx;
	}
</style>
